{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
    Item列表
{% endblock %}
{% block content %}
    <div class="container">
        <h2>
            Item列表
            <div class="btn-group pull-right">
                <div id="itemid" class="sr-only"></div>
                <div class="btn-group">
                    <label for="host" class="sr-only"></label>
                    <select class="form-control" id="host">
                        <option value="">选择主机</option>
                        {% for host in host_list %}
                            <option value="{{ host.hostid }}" >{{ host.host }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="btn-group">
                    <label for="period" class="sr-only"></label>
                    <select class="form-control" id="period" onchange="GetItem($('#itemid').html())">
                        <option value="3600">选择时间</option>
                        <option value="3600">1小时</option>
                        <option value="7200">2小时</option>
                        <option value="86400">一天</option>
                        <option value="604800">一周</option>
                        <option value="2592000">一个月</option>
                    </select>
                </div>
                <button class="btn btn-default" onclick="GetItem($('#itemid').html())" title="刷新"><span class="glyphicon glyphicon-refresh"></span></button>
            </div>
        </h2>
        {% if error %}<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ error }}</div>{% endif %}
        {% if success %}<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ success }}</div>{% endif %}
        <hr>
        <img id="img" src="" style="width:100%">
        {% if item_list %}

            <div class="table-responsive">
                 <table class="table table-hover table-bordered table-striped" id="dataTables-example">
                    <thead>
                        <tr>
                            <th>NAME</th>
                            <th>KEY</th>
                            <th>INTERVAL</th>
                            <th>HISTORY</th>
                            <th>TRENDS</th>
                            <th>LASTNS</th>
                            <th>LASTVALUE</th>
                            <th>STATUS</th>
                        </tr>
                    </thead>
                     <tbody>
                     {% for item in item_list %}
                        <tr>
                            <td><a href="#" onclick="GetItem('{{ item.itemid }}')" title="{{ item.description }}">{{ item.name }}</a></td>
                            <td>{{ item.key_ }}</td>
                            <td>{{ item.delay }}sec</td>
                            <td>{{ item.history }}day</td>
                            <td>{{ item.trends }}day</td>
                            <td>{{ item.lastclock }}</td>
                            <td class="text text-danger">{{ item.lastvalue }}</td>
{#                            <td class="text text-danger"><a href="{% url 'zabbix:history' %}?itemid={{ item.itemid }}&datatype={{ item.data_type }}" target="_blank">{{ item.lastvalue }}</a></td>#}
                            <td>{% if item.status == '0' %}<label class="label label-success">Enable</label>
                                {% else %}<label class="label label-danger">Disable</label>{% endif %}
                            </td>
                        </tr>
                     {% endfor %}
                     </tbody>
                </table>
            </div>

        {% endif %}
    </div>
{% endblock %}
{% block scripts %}
    <script>
        $(function(){
             $("#host").val("{{ hostid }}");
        });
        $('#host').change(function(){
            var hostid=$(this).val();
            if (!hostid){alert("请选择主机！")}
            else{window.location.href="{% url 'zabbix:item' %}?hostid="+hostid;}
        });
        function GetItem(itemid){
            var period=$('#period').val();
{#            var itemid=$('#item').val();#}
            $('#itemid').html(itemid);
            if(!itemid){alert("请选择一个监控对象！")}
            else{$('#img').attr("src","{{ itemurl }}?itemids="+itemid+"&period="+period);}
        }
    </script>
{% endblock %}